<template>
    <div>
        <FruitItem
            v-for="(item,index) in list" 
            :item="item" :index="index"
            :key="index"
            @add="addHandler"
            @sub="subHandler"
        >
        <div class='aaa' v-show= "item.discount">
            <img class='image' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F28dc92f6936412dc83c416fac06abf62e95921a92920-yySbVZ_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659197516&t=d3d1236435e9adb0879649ee8c78060d'/>
        </div>
        
        </FruitItem>
        
        
        <div >
            总价:{{ total | currencyRMB }}
        </div>
    </div>
</template>

<script>
import FruitItem from './FruitItem.vue'
    export default {
        components:{
            FruitItem
        },
        data(){
            return {
                list:[
                    { name : '香蕉',price: 10,count : 1 ,discount:true},
                    { name : '苹果',price: 20,count : 1 ,discount:false},
                    { name : '榴莲',price: 30,count : 1 ,discount:true},
                    { name : '葡萄',price: 50,count : 1 ,discount:false},
                ]
            }
        },
        computed: {
            total(){
                let sum = 0;
                this.list.forEach((item)=>{
                    sum += item.count * item.price
                })
                return sum;
            }
        },
        methods:{
            addHandler(index){
                if(this.list[index].count<4){
                this.list[index].count ++;
                }else{
                    alert('数量不能大于4')
                }
            },
            subHandler(item){
                if(item.count>1){
                        item.count--
                    }else{
                        alert('数量不能小于1')
                    } 
            }
        }
    }
</script>

<style scoped>
    /* .aaa{
        width: 15px;
        height: 15px;
        background-color: rgb(203, 80, 80);
    } */
    .image{
        width: 18px;
        height: 18px;
    }
</style>